<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
#main{ text-align:center;}
#float{
	position:absolute;
	left:30px;
	top:60px; 
	z-index:1;
	}
#close{
	position:absolute;
	top:60px;
	left:134px;
	z-index:2;
	cursor:hand;
}
</style>
</head>
<body>
<div id="close" onClick="adv_close()"><img src="images/close.jpg"></div>
<div id="float"><img src="images/advpic.jpg"></div>
<div id="main"><img src="images/contentpic.jpg"></div>
<script>

	var closeObj = document.getElementById("close");
	var floatObj = document.getElementById("float");

	var closeTop; // 关闭按钮距顶部的距离
	var closeLeft; // 关闭按钮距左侧的距离

	var floatTop;
	var floatLeft;


	// 关闭广告
	function adv_close(){
		// 获取广告和关闭按钮对象
		closeObj.style.display = "none";
		floatObj.style.display = "none";
	}

	// 获取初始化时页面打开时 这两个个元素对应的偏移量 top  left
	// 通过js来获取css属性值
	function init(){
		// 如果是ie浏览器
		// closeObj.currentStyle.display

		// 如果不是ie浏览器
		closeTop = document.defaultView.getComputedStyle(closeObj,null).top;
		closeLeft = document.defaultView.getComputedStyle(closeObj,null).left;

		//console.log(closeTop + " ----- " + closeLeft);  60px ---- 134px

		floatTop = document.defaultView.getComputedStyle(floatObj,null).top;
		floatLeft = document.defaultView.getComputedStyle(floatObj,null).left;

	}

	init();

	// 监听滚动条
	function move(){
		// top 是滚动条纵向移动的距离
		var top = document.documentElement.scrollTop || document.body.scrollTop;
		// left 是滚动条横向移动的距离
		var left = document.documentElement.scrollLeft || document.body.scrollLeft;
		//console.log(top);

		closeObj.style.top = top + parseInt(closeTop) + "px";
		floatObj.style.top = top + parseInt(floatTop) + "px";

		closeObj.style.left = left + parseInt(closeLeft) + "px";
		floatObj.style.left = left + parseInt(floatLeft) + "px";
	}

	window.onscroll = move;

</script>
</body>
</html>
